<template>
  <div class="announcement-list-container">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>信息公告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card shadow="never" class="main-card">
      <el-table :data="filteredList" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column label="公告名称" min-width="300">
          <template #default="{ row }">
            <div class="announcement-title">
              <el-icon><Document /></el-icon>
              <router-link :to="`/announcement/detail/${row.id}`" class="title-link">
                {{ row.title }}
              </router-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="发布时间" width="150" align="center" />
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Document } from '@element-plus/icons-vue'

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const list = ref([
  { id: 1, title: '【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告', date: '2022-04-13' },
  { id: 2, title: '【麻城市中心】麻城市农村公路管理局招标计划', date: '2022-04-13' },
  { id: 3, title: '【麻城市中心】麻城经济技术开发区谌家园小学及附属幼儿园建设项目招标预公告', date: '2022-04-13' },
  { id: 4, title: '【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程', date: '2022-04-13' },
  { id: 5, title: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包（EPC）', date: '2022-04-13' },
  { id: 6, title: '海头镇宅基村土地发包项目', date: '2022-04-13' },
  { id: 7, title: '先锋创业大楼（515-1室）60m²', date: '2022-04-13' },
  { id: 8, title: '烟台市福山区人民政府清洋街道办事处2023年04（至）05月政府采购意向', date: '2022-04-13' },
  { id: 9, title: '同江市实验幼儿园2023年05月政府采购意向-城乡义务教育补助', date: '2022-04-13' },
  { id: 10, title: '侯马市第二中学校2023年4月至12月政府采购意向-城乡义务教育补助省级配套经费', date: '2022-04-13' },
  { id: 11, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-13' },
  { id: 12, title: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-13' },
  { id: 13, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-13' },
  { id: 14, title: '候马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-13' },
  { id: 15, title: '【次氯酸钠贮存罐修理】采购公告', date: '2022-04-13' }
])

const filteredList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return list.value.slice(start, end)
})

onMounted(() => {
  fetchData()
})

const fetchData = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    total.value = list.value.length
    loading.value = false
  }, 500)
}

const handlePageChange = () => {
  fetchData()
}
</script>

<style scoped lang="scss">
.announcement-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  
  .header {
    margin-bottom: 20px;
    
    .el-breadcrumb {
      font-size: 16px;
    }
  }
  
  .main-card {
    border-radius: 4px;
    
    :deep(.el-table) {
      th {
        background-color: #f5f7fa;
        font-weight: bold;
      }
      
      td {
        padding: 12px 0;
      }
    }
  }
  
  .announcement-title {
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 8px;
      color: #20b2aa;
    }
    
    .title-link {
      color: #333;
      text-decoration: none;
      
      &:hover {
        color: #20b2aa;
        text-decoration: underline;
      }
    }
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>